import React, { Component } from 'react'
import '../css/cate.css'
import { cateGoodsList, cateList ,cateGoodsListfl } from '../request/api'

export default class Order extends Component {
    constructor() {
        super()
        this.state = {
            cateList: [],
            goodsList: [],
            active:0
        }
    }
    render() {
        const { cateList, goodsList,active} = this.state
        return (
            <div className='cate'>
                <div className='title'>
                    <div className='tl' onClick={()=>{this.before()}}>&gt;</div>
                    <div className="tr">商品分类</div>
                </div>
                <div className="searchs">
                    <div className="search">
                        <input type="text" name="" id="" placeholder='按内容搜索' />
                        <button>搜索</button>
                    </div>
                </div>
                <div className="center">
                    <div className="cleft">
                        <ul>
                            {cateList.map(item => (
                                <li className={active===item.id?'actives':''} key={item.id} onClick={()=>this.changeList(item.id)}>{item.catename}</li>
                            ))}
                        </ul>
                    </div>
                    <div className="cright">
                        <div className="maxbox">
                            {goodsList.map(item => (
                                <div className="midbox" key={item.id} >
                                    <div className="minbox">
                                        <img className='iimgpic' src={this.$pregImg + item.img}
                                        onClick={()=>this.goodsinfo(item.id)}
                                            alt="" />
                                        <div className="minbocr">
                                            <div className="mint">
                                                <img className='aapic' src="/xs.png" alt="" /><div className="mintr">{item.goodsname}</div>
                                            </div>
                                            <div className="desc">{item.description}</div>
                                            <div className="price">
                                                <div className="pl">
                                                    <div className='plt'>
                                                        <div className="pltl">&yen;{item.price}</div>
                                                        <del className="pltr">&yen;{item.market_price}</del>
                                                    </div>
                                                    <div className="plb">
                                                        <div className="plbl">999人已付款  99.9%好评</div>
                                                    </div>
                                                </div>
                                                <div className="pr">加入购物车</div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>

                    </div>
                </div>
            </div>
        )
    }
    componentDidMount() {
        cateList().then(res => {
            if (res.code === 200) {
                this.setState({ cateList: res.list })
                // console.log(res.list);
            }
        })
        cateGoodsList().then(res => {//不分类
            if (res.code === 200) {
                // console.log(res.list);
                this.setState({ goodsList: res.list })
            }
        })
    }
    changeList(id){
        cateGoodsListfl({fid:id}).then(res=>{//分类
            if(res.code===200){
                this.setState({goodsList:res.list,
                    active:id})
                // console.log(this.state.active);
            }
        })
    }
    before(){
        this.props.history.go(-1)
    }
    goodsinfo(id){
        this.props.history.push(`/goodsinfo/${id}`)
    }
}
